<template>
   <div ref="content">
    <video :src="src" controls id="video"  poster="@/assets/logo.png"></video>
    
    <div v-if="state == 1" id="Info" class="flex">{{info}}</div>
    <div v-if="state==1 || state==2" id="videoInfo" class="flex">
        <img :src="videoInfo.face" alt="" class="headphoto" @click="toOtherPage(`https://space.bilibili.com/`+videoInfo?.mid)">  
        <div>{{videoInfo.name}}</div>
        <div class="fun">
            <button @click="toOtherPage(ArticleDetail.video)">视频直达</button>
        </div>
    </div> 
   </div>
</template>
<script>
import axios from 'axios'
import { mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
            src:null,
            state:0, //0:加载 1:数据正常,视频不可播放  2:B站视频,数据均正常  3:其他链接，播放正常  4:加载失败
            info:'加载中',
            videoInfo:{
                title:'',
                mid:'',
                name:'',
                face:''
            }
        }
     },
     computed:{
        ...mapState('ArticleDetail',['ArticleDetail'])
     },
     methods:{
        ...mapMutations('ArticleDetail',['SETARTICLEDETAILCATALOG']),
        /*获取b站的id */
        getId(){
 
            let url = this.ArticleDetail.video.split('/')
            let  res = url[url.length - 1].split('?')[0]
            if(res[0]=='a' || res[0] == 'A')
            return `aid=${res}`
            return `bvid=${res}`
        },
        getVideoInfo(data){
            this.videoInfo.title = data.title
            this.videoInfo.mid=data.owner.mid
            this.videoInfo.name=data.owner.name
            this.videoInfo.face=data.owner.face
        },
        error(message,info){
             this.$message.error(message)
             this.info=info
        },
        /* 设置目录 */
        getCatalog(){
           let data = []
           let top=  this.$refs.content.offsetTop  
           let label= "视频"
           data.push({top,label})
           top =top +this.$refs.content.clientHeight
           label= "评论"
           data.push({top,label})
           this.SETARTICLEDETAILCATALOG(data)
        },
        async init(){
            if(this.ArticleDetail.videoType == 2) {
                this.state = 3
                this.src =this.ArticleDetail.video
                return 
            }
            try{

                let id = this.getId()
                let url =`bilibili/x/web-interface/view?${id}` //获取视频信息
                let res =await axios.get(url)
                if(res.data.code != 0) return this.error(res.data.message,res.data.message)
                this.state = 1
                this.getVideoInfo(res.data.data) //设置视频信息
                let cid = `cid=${res.data.data.cid}`
                let url2 =`bilibili/x/player/playurl?${id}&${cid}&platform=html5&otype=json&qn=16&type=mp4&html5=1`
                let res2 =await axios.get(url2)
                if(res2.data.code != 0) return this.error(res2.data.message,res2.data.message)
                this.src=res2.data.data.durl[0].url 
                this.state = 2
                }catch(error){
                    this.$message.error(error)
                    this.state = 4
                    this.info = '错误:'+error
                }
        },
        toOtherPage(href){
           window.open(href ,"_blank");
        }
    
     },
     created(){
        this.init() 
     },
     mounted() {
        this.getCatalog()
     },
  }
</script>
<style scoped lang='less'>
// b站视频信息
#videoInfo{
    width: 100%;
    background: #F7F9FE;
    border-left: 5px solid var(--GeneralBackColor);
    margin: 5px 0;


    padding: 10px;
    box-sizing: border-box;
     position: relative;
     justify-content: flex-start;
     img{
        margin-right: 10px;
     }

     .fun{
        position: absolute;
        right: 10px;
        top: 10px;
        color: white;
    }
}
#video{
    width: 100%;
    height: 400px;
    background: black;
    border-radius: 5px;
}
#Info{
    width: 100%;
    height: 400px;
    background: black;
    font-size: 20px;
    color: white;
    position: relative;
    border-radius: 5px;

}

</style>